import React, { useState, useEffect } from 'react';
import { Switch } from 'antd';
import { SunOutlined, MoonOutlined } from '@ant-design/icons';
interface ThemeToggleProps {
	onChange: (isDarkMode: boolean) => void;
	className?: string;
}
const ThemeToggle: React.FC<ThemeToggleProps> = ({ onChange, className }) => {
	const [isDarkMode, setIsDarkMode] = useState(() => {
		return localStorage.getItem('theme') === 'dark';
	});

	useEffect(() => {
		localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
		onChange?.(isDarkMode);
	}, [isDarkMode, onChange]);

	const handleThemeChange = (checked: boolean) => {
		setIsDarkMode(checked);
	};

	return (
		<div className={`"right-4 bottom-4 flex items-center gap-2 bg-white rounded-lg z-10" ${className}`}>
			<SunOutlined className={`text-base ${!isDarkMode ? 'text-blue-500' : 'text-gray-400'}`} />
			<Switch checked={isDarkMode} onChange={handleThemeChange} size="small" />
			<MoonOutlined className={`text-base ${isDarkMode ? 'text-blue-500' : 'text-gray-400'}`} />
		</div>
	);
};

export default ThemeToggle;
